<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform 坐标系统</title>
    <style type="text/css">
        .test{
            width: 100px;
            height:100px;
            border: 1px solid #000;
            margin: 0 0 70px 100px;
            box-sizing: content-box;
        }
        .test div{
            width: 100px;
            height:100px;
            background: #ddd;
            word-wrap: break-word;
        }
        .test div[class^="rotate1"]{
            position: absolute;
        }
        .test div[class^="rotate11"]{
            transform-origin: center center;
        }
        .test div[class^="rotate12"]{
            transform-origin: top center;
        }
        .test div[class^="rotate13"]{
            transform-origin: right center;
        }
        .test div[class^="rotate14"]{
            transform-origin:left top;
        }
        .test div[class^="rotate15"]{
            transform-origin:right bottom;
        }
        .rotate111,.rotate121,.rotate131,.rotate141,.rotate151{
            transform: rotate(0deg);
            opacity: 0.5;
        }
        .rotate112,.rotate122,.rotate132,.rotate142,.rotate152{
            transform: rotate(30deg);
            opacity: 0.4;
        }
        .rotate113,.rotate123,.rotate133,.rotate143,.rotate153{
            transform: rotate(60deg);
            opacity: 0.6;
        }
        .rotate114,.rotate124,.rotate134,.rotate144,.rotate154{
            transform: rotate(90deg);
            opacity: 0.8;
        }
    </style>
</head>
<body>
<h3>旋转：rotate()</h3>
<div class="test">
    <div class="rotate111"></div>
    <div class="rotate112"></div>
    <div class="rotate113"></div>
    <div class="rotate114"></div>
</div>
<div class="test">
    <div class="rotate121"></div>
    <div class="rotate122"></div>
    <div class="rotate123"></div>
    <div class="rotate124"></div>
</div>
<div class="test">
    <div class="rotate131"></div>
    <div class="rotate132"></div>
    <div class="rotate133"></div>
    <div class="rotate134"></div>
</div>
<div class="test">
    <div class="rotate141"></div>
    <div class="rotate142"></div>
    <div class="rotate143"></div>
    <div class="rotate144"></div>
</div>
<div class="test">
    <div class="rotate151"></div>
    <div class="rotate152"></div>
    <div class="rotate153"></div>
    <div class="rotate154"></div>
</div>
</body>
</html>